/** @format */

import classnames from 'classnames'
import SvgIcon from '@/components/SvgIcon/SvgIcon'
import styles from './index.module.scss'
import { useNavigate } from 'react-router-dom'
import type { ArtItem } from '@/types/http'
import { Image } from 'antd-mobile'

const ArticleItem = ({
  cover: { type, images = [] },
  title,
  aut_name,
  comm_count,
  pubdate,
  art_id
}: ArtItem) => {
  const navigate = useNavigate()
  return (
    <div
      className={styles.root}
      onClick={() => {
        navigate(`/article/${art_id}`)
      }}>
      <div
        className={classnames(
          'article-content',
          type === 3 && 't3',
          type === 0 && 'none-mt'
        )}>
        <h3>{title}</h3>
        {type !== 0 && (
          <div className='article-imgs'>
            <div className='article-img-wrapper'>
              {images.map((url, idx) => (
                <Image
                  key={idx}
                  src={url}
                  alt='img'
                  lazy
                />
              ))}
            </div>
          </div>
        )}
      </div>
      <div className={classnames('article-info', type === 0 && 'none-mt')}>
        <span>{aut_name}</span>
        <span>{comm_count} 评论</span>
        <span>{pubdate}</span>
        <span className='close'>
          <SvgIcon name='btn_essay_close' />
        </span>
      </div>
    </div>
  )
}

export default ArticleItem
